<template>
  <div id="box" style="width: 500px; height: 400px; background: #000000"></div>
</template>

<script>
import echarts from 'echarts'

const animationDuration = 3000

export default {
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '450px',
    },
    chartData: {
      type: Object,
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     if (val) {
    //       this.setOptions(val)
    //     }
    //   },
    // },
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var loadingFunnel = {
        title: '',
        arrDataX: [],
        arrDataY: [],
      }
      //title标示文字,标示线
      loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => {
        return {
          text: text,
          top: top,
          left: left,
          textStyle: {
            color: color,
            fontStyle: fontStyle,
            fontFamily: fontFamily,
            fontSize: fontSize,
          },
        }
      }
      loadingFunnel.arrDataX = ['茶叶', '青椒', '大蒜']
      loadingFunnel.arrDataY = [123, 254, 325]
      var myChart = echarts.init(document.getElementById('box'))
      const option = {
        title: [
          loadingFunnel.title(loadingFunnel.arrDataX[0], '17%', '62%', '#12e7e8', 'normal', 'sans-serif', '16'),
          loadingFunnel.title(loadingFunnel.arrDataY[0], '22%', '62%', '#ffffff', 'normal', 'sans-serif', '16'),

          loadingFunnel.title(loadingFunnel.arrDataX[1], '38%', '62%', '#4dc6ff', 'normal', 'sans-serif', '16'),
          loadingFunnel.title(loadingFunnel.arrDataY[1], '43%', '62%', '#ffffff', 'normal', 'sans-serif', '16'),

          loadingFunnel.title(loadingFunnel.arrDataX[2], '55%', '62%', '#eaad38', 'normal', 'sans-serif', '16'),
          loadingFunnel.title(loadingFunnel.arrDataY[2], '61%', '62%', '#ffffff', 'normal', 'sans-serif', '16'),
        ],
        tooltip: {
          show: true,
          formatter: function (params) {
            console.log(params)
            return params.marker + params.name + ':' + params.data.number + '万'
          },
        },
        grid: {
          // containLabel: true,
          left: '10%',
          top: '19%',
          bottom: '0%',
        },
        xAxis: {
          show: false,
          data: ['', '', '', ''],
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#5EA2ED',
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: '#1B5BBA',
            },
          },
        },
        yAxis: {
          show: false,
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#1B5BBA',
            },
          },
          axisLabel: {
            color: '#5EA2ED',
            interval: 0,
          },
        },
        series: [
          {
            type: 'pictorialBar',
            data: [
              {
                name: loadingFunnel.arrDataX[0],
                // z: 100,
                value: 20,
                number: loadingFunnel.arrDataY[0],
                symbolSize: ['130%', '90%'],
                symbolPosition: 'center',
                symbolOffset: ['60%', '-250%'],
                symbol: 'image://Funnel1.png',
              },
              {
                name: loadingFunnel.arrDataX[1],
                // z: 90,
                value: 40,
                number: loadingFunnel.arrDataY[1],
                symbolSize: ['200%', '40%'],
                symbolPosition: 'center',
                symbolOffset: ['-22%', '-130%'],
                symbol: 'image://Funnel2.png',
              },
              {
                name: loadingFunnel.arrDataX[2],
                // z: 80,
                value: 60,
                number: loadingFunnel.arrDataY[2],
                symbolSize: ['280%', '35%'],
                symbolPosition: 'center',
                symbolOffset: ['-60%', '10%'],
                symbol: 'image://Funnel3.png',
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
    // onResize() {
    //   if (this.chart) {
    //     this.chart.resize()
    //   }
    // },
  },
}
</script>
